<template>
  <view class="toast">
    <u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
      <view class="toast">
        <view class="form">
          <view class="select">
            <view class="text"> <text>*</text>供应商: </view>
            <input v-model="user" type="text" placeholder="请选择供应商" />
          </view>
        </view>
        <view class="userItem">
          <view
            @tap="$emit('saveUser', { cname: item.sname, cid: item.id })"
            class=""
            v-for="(item, index) in searchArr"
            :key="index"
          >
            {{ item.sname ? item.sname : "" }}</view
          >
        </view>
        <view class="btn">
          <view @tap="search">查询</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      show: false,
      userArr: [],
      searchArr: [],
    };
  },
  // props: ["show"],
  methods: {
    // 模态框 orderCreateApi
    open() {
      this.show = true;
      this.$api.supplierListApi().then((res) => {
        if (res.code == 200) {
          this.userArr = res.result.list;
          this.searchArr = res.result.list;
        }
      });
    },
    // 模态框
    close() {
      this.show = false;
    },
    search() {
      // if (this.user == "" || this.phone == "") {
      //   uni.showToast({
      //     title: "请输入信息",
      //     icon: "none",
      //   });
      // } else {
        this.searchArr = this.userArr.filter(
          (item) => item.cname.indexOf(this.user) != -1
        );
      // }
    },
    // saveUser() {
    //   // console.log('我是子组件的方法');
    //   this.$emit("saveUser", this.user);
    // },
  },
};
</script>
<style lang="scss" scoped>
.toast {
  padding: 16rpx 49rpx;
  border-radius: 29rpx;

  .btn {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;

    view {
      width: 463rpx;
      height: 97rpx;
      background: rgba(254, 52, 48, 0);
      border: 3rpx solid #272727;
      border-radius: 49rpx;
      line-height: 97rpx;
      text-align: center;
      margin: auto;
    }
  }
  .userItem {
    & > view {
      height: 50rpx;
      line-height: 50rpx;
    }
  }
  .form {
    border-bottom: 1px solid #f1f1f1;
    padding: 0 0 30rpx 0;

    .select {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        margin: 20rpx 0;
        color: #bdbdbd;
        margin-right: 20rpx;

        text {
          color: #fe3430;
        }
      }

      input {
        flex: 1;
        text-indent: 1em;
        height: 94rpx;
        background: #f2f2f2;
        border-radius: 47rpx;
      }

      .input {
        display: flex;
        align-items: center;
        justify-content: space-between;

        input {
          width: 271rpx;
        }

        text {
          text-align: left;
        }
      }
    }
  }
}
</style>
